<template>
  <div :data-id="id" class="virtual-scroller-item">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "VirtualScrollerItem",

  props: {
    id: {
      type: [String, Number],
      default: '',
    },
  },

  inject: ["resizeObserver"],

  mounted() {
    this.resizeObserver.observe(this.$el);
  },

  beforeDestroy() {
    this.resizeObserver.unobserve(this.$el);
  },
}
</script>

<style scoped>

</style>